<template>
  <component :is="iconComponent" v-bind="iconProps" class="inline-flex" />
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { Icon } from '@iconify/vue'

  const props = defineProps<{
    icon: {
      type: 'prime' | 'iconify'
      name: string
    }
    size?: string | number
  }>()

  const iconComponent = computed(() => {
    return props.icon.type === 'prime' ? 'i' : Icon
  })

  const iconProps = computed(() => {
    if (props.icon.type === 'prime') {
      return {
        class: `pi pi-${props.icon.name}`,
        style: props.size ? `font-size: ${props.size}px` : undefined,
      }
    }
    return {
      icon: props.icon.name,
      width: props.size,
    }
  })
</script>
